今天來介紹hooper套件，他可以做到好看的切換畫面效果，我們會做一個簡單範例來說明。

此文章是參考:
點我

安裝

cmd 到專案資料夾

npm install hooper

裝好之後，切換到要使用的元件import

<script>
import { Hooper, Slide } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
  components: {
      Hooper,
      Slide
  },
}
</script>

就可以使用了

範例

在template加入hooper標籤，再放入slide標籤，slide為子畫面的意思。

        <hooper>
          <slide>
            <div class="c1">
              <p>畫面1</p>
            </div>
          </slide>
          <slide>
            <div class="c2">
              <p>畫面2</p>
            </div>
          </slide>
          <slide>
            <div class="c3">
              <p>畫面3</p>
            </div>
          </slide>
          <slide>
            <div class="c4">
              <p>畫面4</p>
            </div>
          </slide>
        </hooper>

只要做到這樣就可以達成滑動畫面的效果了

若想要在畫面兩側有點擊鈕，則要在另外引入Navigation as HooperNavigation。

import { Hooper, Slide,Navigation as HooperNavigation } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
  name: 'asd',
  components: {
      Hooper,
      Slide,
      HooperNavigation
  },
}

然後在hooper標籤裡再加上hooper-navigation標籤並設定其slot屬性。

        <hooper>
          <slide>
            <div class="c1">
              <p>畫面1</p>
            </div>
          </slide>
          <slide>
            <div class="c2">
              <p>畫面2</p>
            </div>
          </slide>
          <slide>
            <div class="c3">
              <p>畫面3</p>
            </div>
          </slide>
          <slide>
            <div class="c4">
              <p>畫面4</p>
            </div>
          </slide>
        <hooper-navigation slot="hooper-addons"></hooper-navigation>
        </hooper>

若想要在畫面上方有類似進度條的效果，則要在另外引入Progress as HooperProgress。

<script>
// @ is an alias to /src
/*eslint-disable*/
import { Hooper, Slide,Progress as HooperProgress } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
  name: 'slideshow',
  components: {
    Hooper,
    Slide,
    HooperProgress
  },
    data:()=>({
        data:"",
    }),
}
</script>

然後在hooper標籤裡再加上hooper-progress標籤並設定其slot屬性。

        <hooper>
          <slide>
            <div class="c1">
              <p>畫面1</p>
            </div>
          </slide>
          <slide>
            <div class="c2">
              <p>畫面2</p>
            </div>
          </slide>
          <slide>
            <div class="c3">
              <p>畫面3</p>
            </div>
          </slide>
          <slide>
            <div class="c4">
              <p>畫面4</p>
            </div>
          </slide>
        <hooper-progress slot="hooper-addons"></hooper-progress>
        </hooper>

若想要在畫面下方有分頁的效果，則要在另外引入Progress as HooperProgress。

// @ is an alias to /src
/*eslint-disable*/
import { Hooper, Slide,Pagination as HooperPagination } from 'hooper';
import 'hooper/dist/hooper.css';
export default {
  name: 'slideshow',
  components: {
    Hooper,
    Slide,
    HooperPagination
  },
    data:()=>({
    }),
}

然後在hooper標籤裡再加上hooper-pagination標籤並設定其slot屬性。

        <hooper>
          <slide>
            <div class="c1">
              <p>畫面1</p>
            </div>
          </slide>
          <slide>
            <div class="c2">
              <p>畫面2</p>
            </div>
          </slide>
          <slide>
            <div class="c3">
              <p>畫面3</p>
            </div>
          </slide>
          <slide>
            <div class="c4">
              <p>畫面4</p>
            </div>
          </slide>
        <hooper-pagination slot="hooper-addons"></hooper-pagination>
        </hooper>

若要呈現另一種分頁的效果，增加hooper-pagination標籤屬性mode="fraction"。

<hooper-pagination slot="hooper-addons" mode="fraction"></hooper-pagination>

若想要在一個hooper中顯示多個slide，只需在hooper加上:itemsToShow="你所需slide數量"(只能整數)

        <hooper :itemsToShow="3">
          <slide>
            <div class="c1">
              <p>畫面1</p>
            </div>
          </slide>
          <slide>
            <div class="c2">
              <p>畫面2</p>
            </div>
          </slide>
          <slide>
            <div class="c3">
              <p>畫面3</p>
            </div>
          </slide>
          <slide>
            <div class="c4">
              <p>畫面4</p>
            </div>
          </slide>
        <hooper-pagination slot="hooper-addons" mode="fraction"></hooper-pagination>
        <hooper-progress slot="hooper-addons"></hooper-progress>
        </hooper>

若要讓:itemsToShow等於小數，還要在hooper標籤加上:centerMode="true"和新增.hooper-slide.is-current的Css效果。

<hooper :itemsToShow="1.35" :infiniteScroll="true" :centerMode="true">

.hooper-slide.is-current {
  transform: scaleX(1.35);//css3水平延伸1.35倍
}

若想要在hooper加上可用滑鼠滾輪控制的效果，在hooper標籤加上:infiniteScroll="true"

<hooper :itemsToShow="3" :infiniteScroll="true">

目前我們的切換方式都是水平左右切換，若要改成垂直上下切換，需在hooper標籤設定其css和加上:vertical="true"屬性。

<hooper :itemsToShow="1.35" :infiniteScroll="true" :centerMode="true"  :vertical="true" style="height: 400px">